<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
	<script type="text/javascript" src="jquery.csspreload.js"></script>
	<script type="text/javascript">
		// Set a rollover image in the bottom div tag - see if it properly preloads the image
		$(function () {
			$("#imgCount").hover(
				function () {
					$(this).css("background-image", "url(http://www.lotterypost.com/images/5-rate.png)");
				},
				function () {
					$(this).css("background-image", "");
				}
			);
			$.cssPreload.add("http://www.lotterypost.com/images/5-rate.png");
		});
		
		$.cssPreload.after(function (images) {
			$("#imgCount").text(">> Preloaded " + images.length + " images.");
		});
	</script>
	<link href="demo.css" rel="stylesheet" type="text/css">
	<style>
		body, p, div {
			font: 12px Verdana, Geneva, sans-serif;
		}
		
		code {
			font: 12px Consolas, 'Courier New', Courier, monospace;
		}
		
		div.hasBG {
			padding: 10px;
			background: url(http://www.lotterypost.com/images/news/2007090603_big.jpg) no-repeat left top;
		}
		
		h1 { font: bold 20px "Segoe UI", Arial, Helvetica, sans-serif; margin:15px 0; }
		h2, #imgCount { font: bold 16px "Segoe UI", Arial, Helvetica, sans-serif; margin:15px 0 25px 35px; text-indent:-20px; }

		#foot {
			margin: 100px 0 30px;
			border: none;
			border-top: 1px solid #ccc;
			padding-top: 4px;
			font: 11px Verdana, Geneva, sans-serif;
		}
		#foot h1 {
			margin: 20px 0 4px;
			font: bold 13px "Segoe UI", Arial, Helvetica, sans-serif;
		}
		#foot ul,
		#foot li {
			margin: 4px 0;
		}
		#foot a {
			text-decoration: none;
			border-bottom: 1px solid #66c;
			color: #00c;
			outline: none;
			font: 11px Verdana, Geneva, sans-serif;
		}
	</style>
</head>
<body>
	<h1>CSS Preload plugin for jQuery</h1>
	<h2>v 1.11</h2>

	<p>This plugin scans all the style sheets in a page, as well as the HTML itself, for images.  It will then automatically preload the images into the browser's cache so that they are instantly available when displayed.</p>
	
	<p>The plugin purposely waits until after the <code>window.onload</code> event has occured, because preloading images any earlier could actually create performance problems, as the browser's natural performance mechanisms for quickly loading images will compete with the plugin's preloading process.  (The <code>window.onload</code> event is triggered by the browser after all the page's resources (images, scripts, stylesheets, etc.) have finished loading.)</p>
	
	<p><code><strong>$.cssPreload.after( &lt; function &gt; )</strong></code> is used to set a callback function that is triggered after the preload cycle completes.  The function is passed an array of URLs of all the images that were preloaded.</p>
	
	<p><code><strong>$.cssPreload.add( &lt; string or array &gt; )</strong></code> manually adds a single image URL [string] or multiple image URLs [array] to the list of images that will be preloaded.  If the images are added before the <code>window.onload</code> event, they will remain queued, and will preload along with all the other images found on the page.  If window.onload has already executed, the images will immediately begin to preload.</p>
	
	<div id="imgs">
		<p>There should be a total of 4 images preloaded in this demo page:</p>
		<ol>
			<li>One in the style tag in the head section.</li>
			<li>One is the CSS style sheet referenced by the link tag.</li>
			<li>One in the JavaScript rollover code in the following paragraph.</li>
			<li>The fourth image is added manually with <code>$.cssPreload.add()</code> because the image is used within JavaScript code for performing a rollover.  (Note the manually-added image waits to preload with all the other images, even though it is added earlier in the page cycle than the normal preload functionality.)
		</ol>
		<p onmouseover="this.style.background='url(http://www.lotterypost.com/images/theme/button-throbber.gif)';" onmouseout="this.style.background='';">
			Mouse-over this paragraph to see a preloaded rollover image.
		</p>
	</div>

	<div id="imgCount"></div>

	<div id="foot">
		CSSPreload plugin for jQuery<br />
		Copyright &copy; 2009-2010 Todd Northrop
		Visit Speednet Group at <a href="http://www.speednet.biz/">www.speednet.biz</a>
		<h1>Some of our projects:</h1>
		<ul>
			<li><a href="http://jquery-watermark.googlecode.com/">Watermark plugin for jQuery</a></li>
			<li><a href="http://topzindex.googlecode.com/">TopZIndex plugin for jQuery</a></li>
			<li><a href="http://jquery-unwrap.googlecode.com/">Unwrap plugin for jQuery</a></li>
			<li><a href="http://continueif.googlecode.com/">ContinueIf plugin for jQuery</a></li>
			<li><a href="http://tinyautosave.googlecode.com/">Auto-Save plugin for TinyMCE</a></li>
			<li><a href="http://www.lotterypost.com/gadget">Lottery Results Gagdet for Windows&nbsp;Vista&nbsp;&amp; Windows&nbsp;7</a></li>
		</ul>
	</div>

</body>
</html>
